<template>
    <div class="wrap">
        <Navbar />
        <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in lunbos" :key="item.id">
                <img :src="item.s_photos[0].path" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-prev" slot="pagination"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next" slot="pagination"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </swiper>
        <AsideNav :seriesList="seriesList" :directGoods="directGoods"/>
        
        <!-- 分类的div -->
        <!-- 要实现点击后跳转去product页面而且要带上对应的id -->
        <div class="product">
            <!-- 分类标题 -->
            <div class="classify">
                <h1>手机</h1>
                <span @click="goProduct(2128)">查看更多 <i class="el-icon-arrow-right"></i> </span>
            </div>
            <!-- 对应的商品 -->
            <ul class="content">
                <li class="good" v-for="item in res1" :key="item.id">
                    <img :src="item.s_goods_photos[0].path" alt="" @click="goDetail(item.id)">
                    <h3>{{item.name}}</h3>
                    <p>{{item.desc}}</p>
                    <p>￥{{item.price}}</p>
                    <!-- <p>{{item.sale_price}}</p> -->
                    <div class="bnts">
                        <button @click="goDetail(item.id)">查看详情</button>
                        <button @click="addShop(item.id)">加入购物车</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="product">
            <!-- 分类标题 -->
            <div class="classify">
                <h1>电脑</h1>
                <span @click="goProduct(2129)">查看更多 <i class="el-icon-arrow-right"></i> </span>
            </div>
            <!-- 对应的商品 -->
            <ul class="content">
                <li class="good" v-for="item in res2" :key="item.id">
                    <img :src="item.s_goods_photos[1].path" alt="" @click="goDetail(item.id)">
                    <h3>{{item.name}}</h3>
                    <p>{{item.desc}}</p>
                    <p>￥{{item.price}}</p>
                    <!-- <p>{{item.sale_price}}</p> -->
                    <div class="bnts">
                        <button @click="goDetail(item.id)">查看详情</button>
                        <button @click="addShop(item.id)">加入购物车</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="product">
            <!-- 分类标题 -->
            <div class="classify">
                <h1>平板</h1>
                <span @click="goProduct(2130)">查看更多 <i class="el-icon-arrow-right"></i> </span>
            </div>
            <!-- 对应的商品 -->
            <ul class="content">
                <li class="good" v-for="item in res3" :key="item.id">
                    <img :src="item.s_goods_photos[0].path" alt="" @click="goDetail(item.id)">
                    <h3>{{item.name}}</h3>
                    <p>{{item.desc}}</p>
                    <p>￥{{item.price}}</p>
                    <!-- <p>{{item.sale_price}}</p> -->
                    <div class="bnts">
                        <button @click="goDetail(item.id)">查看详情</button>
                        <button @click="addShop(item.id)">加入购物车</button>
                    </div>
                </li>
            </ul>
        </div>
        <ClassifyList v-for="item in classifies" :key="item.createdAt" :id="item.id" :classify="item" />
      <!-- 秒杀 -->
        <div class="seckill">
            <h2>限时秒杀</h2>
            <div class="miaosha">  
            <div class="lt">
                <img src="../秒杀.png" alt="" />
                <span>{{ nowDate }}场<br />距结束还剩</span>
                <div class="bottom">
                    <span>{{ HH }}</span>&nbsp;:&nbsp;<span>{{ MM }}</span>&nbsp;:&nbsp;<span>{{ ss }}</span>
                </div>
            </div>
            <div class="rt">
                <div class="bottomImg">
                    <ul>
                        <!--  -->
                        <li v-for="item in msGoods" :key="item.id" @click="goDetail(item.id)">
                            <img :src="item.s_goods_photos[0].path" alt="" />
                            <p>{{ item.name }}</p>
                            <p>
                                <img src="../优惠.png" alt="" />
                                8.8折
                            </p>
                            <P>
                                <span>￥{{ (item.price*0.88).toFixed(2)}}</span>
                                &nbsp;&nbsp;
                                <span>￥{{ item.price }}</span>
                            </P>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
 
        <RightAside />
    </div>
</template>

<script>
//引入时间
import { formattingDate } from "../util/formatdate.js";
// 引入头部导航栏组件
import Navbar from '../components/Navbar.vue'
// 引入轮播图侧边栏组件
import AsideNav from '@/components/AsideNav.vue'
// 引入侧边栏组件
import RightAside from '../components/RightAside.vue';
// 引入商品分类组件 v-for出来
import ClassifyList from "../components/ClassifyList.vue"
// 引入swiper组件
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"
// 引入swiper样式
import "swiper/css/swiper.css";
import { getLunbo, getClassify, addCart, getCart } from "@/assets/request.js"

export default {
    name: "Index",
    data() {
        return {
            // 配置swiper
            swiperOptions: {
                //切换效果
                // effect:"cube",
                // 自动切换
                autoplay: true,
                // 循环模式
                loop: true,
                // preventClicks : false,
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            // 存放轮播图的数组
            lunbos: [],

            // goods: [],
            // 存放分类的数组
            // 只截取穿戴，智慧屏内容到GoodCart组件中渲染
            classifies: [],
            // 截取除穿戴，智慧屏内容到GoodCart组件中渲染
            directGoods:[],
            // 手机，电脑 平板的数组
            seriesList:[],
            // 手机 电脑 平板内选取8个数据
            res1: [],
            res2: [],
            res3: [],
            nowDate: formattingDate(new Date(), "HH") + ":00",
            HH: "00",
            MM: 0,
            ss: 0,
            nextTime: 0,
            // 秒杀商品
            msGoods: [],
        }
    },
    components: {
        Swiper,
        SwiperSlide,
        ClassifyList,
        RightAside,
        Navbar,
        AsideNav,
    },
    directives: {
        swiper: directive,
    },
    methods: {
        // 跳转到产品页
        goProduct(id) {
            this.$router.push({
                name: "product",
                params: {
                    id,
                }
            })
        },
        // 跳去详情页
        goDetail(id) {
            localStorage.removeItem('goodId')
            this.$router.push({
                name: "detail",
                params: {
                    id,
                }
            })
        },

        // 添加购物车
        async addShop(id) {
            // 发请求
            let goodRes = await addCart({
                goods_id: id,
                num: 1,
                project_id: 255
            })
            if (goodRes.status == 200) {
                this.$message({
                    message: '已加入购物车',
                    type: 'success',
                    duration: 800,
                })
            } else {
                this.$message({
                    message: '加入购物车失败',
                    type: 'warning',
                    duration: 1000
                })
            }
        },
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    async mounted() {
        // 轮播图
        let lunboRes = await getLunbo({
            // 填写自己项目id
            project_id: 255,
        });
        // 轮播图的数组
        this.lunbos = lunboRes.data.result;

        // 分类
        let classifyRes = await getClassify({
            project_id: 255,
        })
        // 用过滤方法筛选穿戴和智慧屏的内容
        this.classifies = classifyRes.data.result.filter(item => {
            return item.id == 2131 || item.id == 2177
        })
         // 用过滤方法筛选穿戴和智慧屏和配件的内容
         this.directGoods = classifyRes.data.result.filter(item => {
            return item.id == 2131 || item.id == 2177|| item.id == 2154|| item.id == 2176
        })
        this.directGoods = this.directGoods.slice(0,3)
        console.log(this.directGoods);
        // 找到手机 电脑 平板三个内容
        let arr = classifyRes.data.result
        arr = arr.splice(0, 3)
        // 手机信息
        let resPhone = arr.filter(item => item.id == 2128)
        resPhone[0].children.forEach(item => {
            this.res1.push(...item.s_goods)
        })
        this.res1.splice(0, 7);
        // 电脑信息
        let resComputer = arr.filter(item => item.id == 2129)
        resComputer[0].children.forEach(item => {
            this.res2.push(...item.s_goods)
        })
        this.res2.splice(0, 6);
        // 平板信息
        let resFlat = arr.filter(item => item.id == 2130)
        resFlat[0].children.forEach(item => {
            this.res3.push(...item.s_goods)
        })
        this.res3.splice(0, 4);

        // 手机等三个内容传到组件中
        this.seriesList.push(...resPhone,...resComputer,...resFlat)
        // console.log(this.seriesList);
        // 秒杀商品
        this.msGoods.push(this.res1[3], this.res1[4], this.res2[Math.floor(Math.random() * 7)], this.res1[Math.floor(Math.random() * 7)])
        // console.log(Math.floor(Math.random()*20));
        
        // 用定时器获取本地时间
        window.setInterval(() => {
            let upTime = formattingDate(new Date(), "HH");
            upTime = Number(upTime);
            upTime >= 24 ? (upTime -= 24) : upTime;
            this.nextTime = upTime + 1 + ':00';
            upTime < 10 ? (upTime = '0' + upTime) : upTime;
            this.nowDate = upTime + ':00';
            let entMM = new Date().getMinutes();
            let entss = new Date().getSeconds();
            this.MM = 59 - entMM;
            this.MM < 10 ? (this.MM = '0' + this.MM) : this.MM;
            this.ss = 59 - entss;
            this.ss < 10 ? (this.ss = '0' + this.ss) : this.ss;
        }, 1000)
    }
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.wrap {
    width: 100%;
    background-color: rgb(226, 229, 231);
    // 轮播图
    .swiper {
        // width: vw(1300);
        height: vw(550);
        position: relative;

        img {
            width: 100%;
            height: 100%;
        }
    }

    // 产品分类
    .product {
        width: 100%;

        .classify {
            width: vw(1200);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: vw(30) 0 vw(16) 0;

            h1 {
                font-size: vw(24);
                font-weight: 500;
            }

            span {
                cursor: pointer;
            }
        }

        .content {
            width: vw(1200);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .good {
                width: vw(291);
                height: vw(420);
                background-color: #fff;
                text-align: center;
                margin-bottom: vw(16);

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
                }

                img {
                    width: vw(291);
                    height: vw(254);
                    cursor: pointer;
                }

                h3 {
                    height: vw(26);
                    font-weight: 400;
                    font-size: vw(15);
                    line-height: vw(26);
                    margin: vw(10) vw(20) 0 vw(20);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p:nth-of-type(1) {
                    color: rgb(173, 172, 172);
                    height: vw(25);
                    font-size: vw(12);
                    line-height: vw(25);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p:nth-of-type(2) {
                    color: red;
                    font-size: vw(18);
                    margin: 0 0 vw(15) 0;
                }

                .bnts {
                    margin: 0 vw(50);
                    display: flex;
                    justify-content: space-between;

                    button:nth-of-type(1) {
                        padding: vw(5) vw(8);
                        cursor: pointer;
                    }

                    button:nth-of-type(2) {
                        padding: vw(5) vw(8);
                        color: red;
                        cursor: pointer;
                    }
                }
            }
        }


    }

    .seckill{
            width: vw(1200);
            margin: 0 auto;
            padding: vw(20) 0 vw(16) 0;
            h2{   
             height: vw(50); 
             font-size: vw(24);
             font-weight: 500;
           
        }
        // 秒杀
     .miaosha {
        width: vw(1200);
        height: vw(350);
        padding-bottom: vw(40);
        display: flex;
        justify-content: space-between;

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lt {
            width: vw(260);
            height: vw(300);
            background-color: rgb(216, 207, 207);
            position: relative;

            img {
                width: vw(50);
                height: vw(50);
                position: absolute;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
            }

            >span {
                width: 100%;
                display: block;
                position: absolute;
                top: 50%;
                left: 0%;
                font-size: vw(20);
                color: #fff;
                text-align: center;
                font-weight: 500;
            }

            .bottom {
                width: 100%;
                height: vw(80);
                position: absolute;
                left: vw(-52);
                bottom: 5%;
                font-size: vw(30);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 vw(50);

                >span {
                    display: block;
                    width: vw(40);
                    height: vw(40);
                    background: #000;
                    border-radius: vw(5);
                    color: #fff;
                    font-size: vw(18);
                    font-weight: 600;
                    text-align: center;
                    line-height: vw(35);
                }
            }
        }

        .rt {
            width: vw(920);
            height: vw(300);
            position: relative;
            .bottomImg {
                width: vw(900);
                height: vw(300);
                position: absolute;
                left: 0;
                bottom: 0;

                ul {
                    width: vw(900);
                    height: 100%;
                    display: flex;
                    justify-content: space-between;

                    li {
                        width: vw(220);
                        height: 100%;
                        color: #333;
                        text-align: center;
                        font-size: vw(14);
                        background-color: #fff;
                        border: 1px solid rgb(231, 227, 227);
                        transition: all;
                        cursor: pointer;
                        &:hover{       
                            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
                        }
                        img {
                            width: vw(220);
                            height: vw(200);
                        }
                       p:nth-of-type(2){
                        margin-top: vw(8);
                        color: red;
                        img{
                            width: vw(14);
                            height: vw(14);
                        }
                       }
                       p:nth-of-type(3){
                        margin-top: vw(8);
                        span:nth-of-type(1){
                            font-size: vw(16);
                            color: red;
                        }
                        span:nth-of-type(2){
                           color: gray;
                           text-decoration: line-through;
                        }
                       }
                    }
                }
            }
        }
    }
        }
     
}
</style>
